<template>
  <view class="nutrient-plan">
    <view class="content">{{ nutritionPlan.summary }}</view>
    <view class="nutrient-plan-list">
      <plain-card v-for="(plan, index) in nutritionPlan.items" :key="index">
        <template v-slot:icon>
          <view class="icon-nutrient-plan"></view>
        </template>
        <template v-slot:title>
          <text>{{ plan.title }}</text>
        </template>
        <template v-slot:content>
          <view>{{ plan.content }}</view>
        </template>
      </plain-card>
    </view>
    <button class="button-plain-purple" @tap="navigateToNutrition">定制个人营养素配方</button>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
import PlainCard from "../components/plain-card.vue";
export default {
  components: {
    plainCard: PlainCard
  },
  props: {
    nutritionPlan: {
      type: Object,
      default: null
    }
  },
  data() {
    return {};
  },
  methods: {
    navigateToNutrition() {
      // 健康食品tab id
      const nutritionId = 1;
      Taro.navigateTo({
        url: `/pages/sales/category/index?category=${nutritionId}`
      });
    }
  }
};
</script>

<style lang="less">
@import "./index.less";
</style>
